<template>
    <van-nav-bar title="商品详情页" left-text="返回" left-arrow @click="$router.back()" />
    <!-- {{ $route.query.id }} -->
    <div v-if="goods">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in goods.banners" :key="item">
                <img :src="item" alt="" class="image">
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="content">
        <div class="title">{{ goods.name }}</div>
        <div class="text">{{ goods.text }}</div>
        <div>
            <span class="price">{{ '￥' + goods.price }}</span>
            <span class="originPrice">{{ '￥' + goods.originPrice }}</span>件
        </div>
        <div class="s_box">
            <van-stepper v-model="cont" theme="round" button-size="22" disable-input />
            <van-button class="addCartBtn" type="default" size="small" @click="joinCart(item)">加入购物车</van-button>
            <van-button type="default" size="small" @click="refreshList">立即购买</van-button>
        </div>


        <img v-for="(item, index) in goods.imageList" :src="item" alt="" :key="index" class="image">


    </div>

    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>

    </van-swipe> -->
</template>

<script>
import axios from 'axios';
import { showDialog } from 'vant'; // 引入弹窗的方法

export default {
    data() {
        return {
            // id:this.$route.query.id,
            goods: '',
            cont: ''
        }
    },
    methods: {
        async getDetail() {
            const res = await axios.post('http://localhost:6001/detail/goods', { id: this.$route.query.id })
            this.goods = res.data.result
        },
        async joinCart() {
            const params = {
                goodsId: this.goods.id,
                cont: this.cont
            }
            const res = await axios.post('http://localhost:6001/create/cart', params)
            const data = res.data
            if (!data.success) {
                return showDialog({ message: data.message })
            }
            showDialog({ message: '加入购物车成功' })
            this.$store.state.$bus.emit('refreshCartList')
        },
        refreshList() {
            this.goods = ''
            this.getDetail()
        },

    },
    // created() {
    //     this.getDetail()
    // },
    activated() {
        this.getDetail()
    }

}
</script>

<style scoped>
#app {
    background-color: #fff important;
}

.content {
    padding: 16px;
}

.text {
    margin: 10px 0;
    font-size: 14px;
    color: #999;
}

.price {
    font-size: 28px;
    color: red;
}

.originPrice {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
    margin: 0 10px;
}

.title {
    font-size: 18px;
}

.s_box {

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.addCartBtn {
    margin: 20px 10px;
}

.image {
    width: 100%;
    display: block;
}
</style>